<template>
    <div id="Carousel">
        <div class="header">
            <div class="ret" @click="goBack()"></div>
            <img class="header-left" src="../../assets/zfc-img/左箭头.png" alt="左箭头">
            <span>打造玫瑰般娇嫩肌肤</span>
            <img class="header-right" src="../../assets/zfc-img/断货王/分享图标.png" alt="分享图标">
        </div>
        <div class="center">
            <div class="section">
                <img class="" src="../../assets/img/推荐轮播图.jpg" alt="推荐轮播图">
            </div>
            <div class="centerSec">
                <p>Rose Hydrosed是一款来自澳大利亚的护肤产品，主要功能为深层滋润肌肤，锁住水分，打造玫瑰般娇嫩肌肤...</p>
                <p>下面为您推荐一些产品</p>
            </div>
        </div>
        <div class="kong"></div>
        <div class="nav">
            <div class="nav-one">1</div>
              <div class="title clearfix">
                  <img src="../../assets/img/金榜牌.png" alt="金榜牌">
                  <div class="font">
                    <span class="zero">防晒类</span>
                    <span class="zero">第
                        <span class="one">1</span>
                        位</span>
                  </div>
                  <p>
                      <img src="../../assets/img/下划线.png" alt="下划线">
                  </p>
              </div>
              <div class="Meifubao">
                 <div class="meifubaoImg">
                     <img src="../../assets/img/美肤宝.png" alt="美肤宝">
                 </div>
                 <div class="fontSize">
                     <p class="maxFont">美肤宝</p>
                     <p class="minFont">守护肌肤预防紫外线所引发的斑点以及胶原蛋白变形等，是具有抗老保养效果的全效防晒霜</p>
                     <p class="pay">
                         立即购买
                         <img src="../../assets/img/三角.png" alt="三角">
                     </p>
                 </div>
              </div>
        </div>
        <div class="kong"></div>
              <div class="content">
                <p class="com" :class="{'no':v.falg}" v-for="(v,k) in arr" :key="k" @click="setCom(k)">
                    {{v.text}}
                </p>
              </div>
              <img class="three" src="../../assets/img/下拉三角.png" alt="" @click="change()">
              <div class="sort" :class="{'show':!show}">
                  <div class="all">所有分类</div>
                  <div class="much"  >
                      <span  :class="{'nol':ite.falg}" v-for="(ite,inde) in array1" v-bind:key="inde" @click="idChange(inde)">{{ite.name}}</span>
                  </div>
              </div>
        <div class="ago">
            <div class="close">
                <div class="closeLine">
                    <img src="../../assets/img/标题线.png" alt="">
                    <span>往期上榜</span>
                    <img src="../../assets/img/标题线.png" alt="">
                </div>
            </div>
            <div class="cot">
                <div class="nice" v-for="(i,k) in array" v-bind:key="k">
                    <img class="image" :src="i.urlimg" alt="">
                    <p class="name">{{i.name}}</p>
                    <p class="pri">￥{{i.price}}</p>
                    <p class="go">{{i.go}}</p>
                </div>
            </div>
        </div>
        <div class="kong"></div>
        <div class="nav">
            <div class="nav-one">2</div>
              <div class="title clearfix">
                  <img src="../../assets/img/金榜牌.png" alt="金榜牌">
                  <div class="font">
                    <span class="zero">防晒类</span>
                    <span class="zero">第
                        <span class="one">2</span>
                        位</span>
                  </div>
                  <p>
                      <img src="../../assets/img/下划线.png" alt="下划线">
                  </p>
              </div>
              <div class="Meifubao">
                 <div class="meifubaoImg">
                     <img src="../../assets/img/美肤宝.png" alt="美肤宝">
                 </div>
                 <div class="fontSize">
                     <p class="maxFont">美肤宝</p>
                     <p class="minFont">守护肌肤预防紫外线所引发的斑点以及胶原蛋白变形等，是具有抗老保养效果的全效防晒霜</p>
                     <p class="pay">
                         立即购买
                         <img src="../../assets/img/三角.png" alt="三角">
                     </p>
                 </div>
              </div>
        </div>
        <div class="ago">
            <div class="close">
                <div class="closeLine">
                    <img src="../../assets/img/标题线.png" alt="">
                    <span>往期上榜</span>
                    <img src="../../assets/img/标题线.png" alt="">
                </div>
            </div>
            <div class="cot">
                <div class="nice" v-for="(i,k) in array" v-bind:key="k">
                    <img class="image" :src="i.urlimg" alt="">
                    <p class="name">{{i.name}}</p>
                    <p class="pri">￥{{i.price}}</p>
                    <p class="go">{{i.go}}</p>
                </div>
            </div>
        </div>
        <div class="root"></div>
    </div>
</template>
<script>
export default {
    name:'Carousel',
    data() {
        return {
            show:false,
            arr:[
                {
                    text:'防晒',
                    falg:true,
                },
                {
                    text:'爽肤水×精华',
                    falg:false,
                },
                {
                    text:'乳液×面霜',
                    falg:false,
                },
            ],
            array:[
                {
                    urlimg:require('../../assets/img/蜗牛BB霜.png'),
                    name:'蜗牛饰容BB霜50g',
                    price:'12.90',
                    go:'立即购买',
                },
                 {
                    urlimg:require('../../assets/img/蜗牛BB霜.png'),
                    name:'蜗牛饰容BB霜50g',
                    price:'12.90',
                    go:'立即购买',
                },
                 {
                    urlimg:require('../../assets/img/蜗牛BB霜.png'),
                    name:'蜗牛饰容BB霜50g',
                    price:'12.90',
                    go:'立即购买',
                },
                 {
                    urlimg:require('../../assets/img/蜗牛BB霜.png'),
                    name:'蜗牛饰容BB霜50g',
                    price:'12.90',
                    go:'立即购买',
                },
            ],
            array1:[
                {
                    name:'防晒',
                    falg:true,
                },
                {
                    name:'爽肤水×精华',
                    falg:false,
                },
                {
                    name:'乳液×面霜',
                    falg:false,
                },
                {
                    name:'卸妆水',
                    falg:false,
                },
                {
                    name:'散粉蜜粉',
                    falg:false,
                },
                {
                    name:'眼妆',
                    falg:false,
                },
                {
                    name:'面膜',
                    falg:false,
                },
                {
                    name:'粉饼×粉霜',
                    falg:false,
                },
                {
                    name:'榜上有名',
                    falg:false,
                },
            ]
        }
    },
    methods: {
        // 返回上一页
        goBack(){
            window.history.back()
        },
         // 点击图片回到顶部方法，加计时器是为了过渡顺滑
        backTop () {
            let timer = setInterval(() => {
                let ispeed = Math.floor(-this.scrollTop / 5)
                document.documentElement.scrollTop = document.body.scrollTop = this.scrollTop + ispeed
                if (this.scrollTop === 0) {
                clearInterval(timer)
                }
            }, 16)
         },
         // 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
        scrollToTop () {
            let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
            this.scrollTop = scrollTop
            if (this.scrollTop > 60) {
            this.btnFlag = true
            } else {
            this.btnFlag = false
            }
        },
        // 
        setCom(k){
            this.arr.forEach((v)=>{
            v.falg = false
            });
            this.arr[k].falg = true;
            this.array1.forEach((v)=>{
            v.falg = false
            });
            this.array1[k].falg = true;
        },
        // 点击显示隐藏列表
        change(){
              this.show = !this.show
        },
        idChange(inde){
            this.array1.forEach((ite)=>{
            ite.falg = false
            });
            this.array1[inde].falg = true;
            this.arr.forEach((ite)=>{
            ite.falg = false
            });
            this.arr[inde].falg = true
        },
    },   
        // window对象，所有浏览器都支持window对象。它表示浏览器窗口，监听滚动事件
        mounted () {
        window.addEventListener('scroll', this.scrollToTop)
        },
        destroyed () {
        window.removeEventListener('scroll', this.scrollToTop)
        },
}
</script>
<style scoped>
/* 清浮动*/
.clearfix::after{
content: "";
clear: both;
visibility: hidden;
display: block;
height: 0;
}
/* 表头 */
.header{
      width: 100%;
      height: 0.96rem;
      line-height: 0.96rem;
      background-color: #e53e42;
      font-size: 0.36rem;
      color: #fff;
      position: relative;
  }
  .ret{
    width: 0.25rem;
    height: 0.4rem;
    position: absolute;
    left: 0.2rem;
    top: 0.35rem;
    z-index: 100;
}
  .header-left{
      width: 0.25rem;
      height: 0.4rem;
      position: absolute;
      left: 0.2rem;
      top: 0.3rem;
  }
  .header>span{
      margin-left: 1.7rem;
  }
  .header-right{
      width: 0.4rem;
      height: 0.4rem;
      position: absolute;
      left: 6.3rem;
      top: 0.25rem;
  }
  /* 内容 */
  .center{
      width: 100%;
      height: 4.9rem;
      background-color: #feeaf5;
  }
  .section{
       width: 100%;
      height: 3rem;
  }
  .section>img{
      width: 100%;
      height: 3rem;
  }
  .centerSec{
      width: 100%;
      height: 1.8rem;
      font-size: 0.28rem;
      background-color: #fff;
      margin-top: 0.1rem;
  }
  .centerSec p:nth-child(1){
      width: 6.85rem;
      height: 1rem;
      margin-left: 0.2rem;
  }
  .centerSec p:nth-child(2){
      width: 6.85rem;
      height: 0.8rem;
      line-height: 0.8rem;
      margin-left: 0.2rem;
  }
  .kong{
      width: 100%;
      height: 0.2rem;
      background-color: #feeaf5;
  }
  .nav{
      width: 100%;
      height: 3.1rem;
      background-color: #fff;
      position: relative;
  }
  .nav-one{
      position: absolute;
      top: 0.38rem;
      left: 0.63rem;
      font-size: 0.2rem;
      color: #e53e42;
  }
  .title{
      width: 100%;
      height: 1.1rem;
      font-size: 0;
  }
  .title>img{
      width: 1.4rem;
      height: 1.1rem;
      float: left;
  }
  .font{
      width: 5rem;
      height: 0.6rem;
      line-height: 0.6rem;
      font-size: 0;
  }
  .zero{
      font-size: 0.28rem;
      color: #c46c25;
      
  }
  .font span:nth-child(2){
      margin-left: 0.45rem;
  }
  .one{
      font-size: 0.3rem;
  }
  .Meifubao{
      width: 100%;
      height: 2rem;
      display: flex;
      justify-content: space-around;
  }
  .meifubaoImg{
      width: 1.8rem;
      height: 1.8rem;
      margin-left: 0.1rem;
  }
  .meifubaoImg>img{
      width: 1.6rem;
      height: 1.8rem;
  }
  .fontSize{
      width: 5.4rem;
      height: 1.8rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
  }
  .maxFont{
      font-size: 0.3rem;
      color: #4d4d4d;
  }
  .minFont{
      width: 4.9rem;
      height: 0.6rem;
      font-size: 0.24rem;
      color: #808080;
  }
  .pay{
      width: 1.2rem;
      height: 0.3rem;
      line-height: 0.3rem;
      text-align: center;
      background-color: #e53e42;
      font-size: 0.18rem;
      color: #fff;
  }

  .content{
  width: 100%;
  height: 0.6rem;
  line-height: 0.6rem;
  text-align: center;
  display: flex;
  justify-content: space-around;
  border-bottom: 0.01rem solid #ccc;
  background-color: #fff;
  position: relative;
}
.com{
    font-size: 0.3rem;
}
.no{
  border-bottom: 0.01rem solid #e53e42;
  color: #e53e42;
}
.nol{
  color: #e53e42;
}
.three{
    width: 0.25rem;
    height: 0.15rem;
    position: absolute;
    top: 9.6rem;
    left: 6.5rem;
}
.show{
    display: none;
}
.sort{
    width: 100%;
    height: 2.2rem;
    position: absolute;
    top: 10.4;
    left: 0;
    background-color: #fff;
}
.all{
    width: 100%-0.2rem;
    height: 0.6rem;
    line-height: 0.6rem;
    font-size: 0.3rem;
    padding-left: 0.2rem;
    border-bottom: 1px solid #ccc;
    color: #808080;
   
}
.much{
    width: 100%;
    height: 1.6rem;
     display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-content: space-around;
}
.much span{
    min-width: 0.6rem;
    height: 0.3rem;
    font-size: 0.28rem;
    margin-left: 0.15rem;
}
.ago{
    width: 100%;
    height: 8.1rem;
    background-color: #feeaf5;
}
.close{
    width: 100%;
    height: 0.7rem;
    line-height: 0.8rem;
    padding-top: 0.1rem;
}
.closeLine{
    width: 100%;
    height: 0.6rem;
    font-size: 0.3rem;
    line-height: 0.6rem;
    text-align: center;
    background-color: #e8b2d0;
}
.closeLine span{
    margin: 0 0.2rem;
}
.cot{
    width: 100%;
    height: 7.3rem;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}
.nice{
    width: 3.3rem;
    height: 3.6rem;
    background-color: #fff;
    border: solid 0.01rem #ccc;
    text-align: center;
}
.image{
    width: 3.3rem;
    height: 2.2rem;
}
.name{
    font-size: 0.24rem;
    color: #4d4d4d;
}
.pri{
    font-size: 0.24rem;
    color: #e53e42;
}
.go{
    width: 2.2rem;
    height: 0.3rem;
    line-height: 0.3rem;
    background-color: #e53e42;
    border-radius: 0.2rem;
    font-size: 0.18rem;
    margin-left: 0.5rem;
    color: #fff;
}
.root{
    width: 100%;
    height: 1.5rem;
    background-color: #feeaf5;
}
</style>